<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/amazeui.min.css" />
		<link rel="stylesheet" href="css/admin.css" />
	</head>
	<script src="js\jquery-1.7.2.min.js">
	</script>

	<script type="text/javascript">
		//创建资产
		$(document).on('click', '#insert', function(e) {
			var accountNumber = $("#accountNumber").val();
			var password = $("#password").val();
			$.ajax({
				url : "/insertBackgroundUser",
				type : "POST",
				data : {
					"accountNumber" : accountNumber,
					"password" : password,
				},
				dataType: "json",
				success : function(data) {
					alert(data.tishi);
					window.location.href="/selectBackroundUser?pageNum=1&pageSize=10";
				},
				error:function(data){
					alert(data.tishi);
					window.location.href="/selectBackroundUser?pageNum=1&pageSize=10";
				}
			});
		});
	</script>




	<style type="text/css">
		.black_overlay {
			display: none;
			position: absolute;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			background-color: black;
			z-index: 1001;
			-moz-opacity: 0.8;
			opacity: .80;
			filter: alpha(opacity = 88);
		}


		.white_content {
			display: none;
			position: absolute;
			top: 5%;
			left: 5%;
			width: 80%;
			height: 80%;
			padding: 20px;
			border: 10px solid orange;
			background-color: white;
			z-index: 1002;
			overflow: auto;
		}
	</style>
	<body>
		<div class="admin-content-body">
			<div class="am-cf am-padding am-padding-bottom-0">
				<div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">用户管理</strong><small></small></div>
			</div>

			<hr>

			<div class="am-g">
				<div class="am-u-sm-12 am-u-md-6">
					<div class="am-btn-toolbar">
						<div class="am-btn-group am-btn-group-xs">
							<button type="button" class="am-btn am-btn-default"><span class="am-icon-plus"></span>
								  <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';
									document.getElementById('fade').style.display='block'">
									<input type="button" value="新增" id="creat_new">
									  </a>
							</button>
						</div>
					</div>
				</div>
				<div class="am-u-sm-12 am-u-md-3">

				</div>
				<div class="am-u-sm-12 am-u-md-3">
					<div class="am-input-group am-input-group-sm">
						<input type="text" class="am-form-field">
						<span class="am-input-group-btn">
            <button class="am-btn am-btn-default" type="button">搜索</button>
          </span>
					</div>
				</div>
			</div>


			<!-- 弹出创建新课程的窗口 --> 
			<div id="light" class="white_content">
				<!--创建资产 -->
				<a href="javascript:void(0)"
				   onclick="document.getElementById('light').style.display='none'; 
document.getElementById('fade').style.display='none'">
					<!--创建完毕点击这里-->
				</a>
				<br>
					<input type="text" placeholder="账号" id="accountNumber"><br>
					<input type="text" placeholder="密码" id="password"><br>
					<br>
					<br> <input type="button" value="添加账号" id="insert"><br>
					<br>
			</div>
			<!--//周边变暗-->
			<div id="fade" class="black_overlay"></div>


			<div class="am-g">
				<div class="am-u-sm-12">
					<form class="am-form">
						<table class="am-table am-table-striped am-table-hover table-main">
							<thead>
								<tr>
									<th class="table-check"><input type="checkbox"></th>
									<th class="table-id">ID</th>
									<th class="table-title">账号</th>
									<th class="table-type">密码</th>
									<th class="table-author am-hide-sm-only">角色</th>
									<th class="table-set">操作</th>
								</tr>
							</thead>
							<tbody>
							    <tr th:each="user :${userlists.getList()}">
									<th class="table-check"><input type="checkbox"></th>
									<td th:text="${user.getBackgrounduserid()}">
									<td th:text="${user.getAccountnumber()}">
									<td th:text="${user.getPassword()}"><span>(0为仓库管理员，1为系统管理员)</span>
									<td th:text="${user.getRole()}">
									<td>
										<div class="am-btn-toolbar">
											<div class="am-btn-group am-btn-group-xs">
											<a th:href="@{/delectBackgroundUser(backgroundUserId=${user.getBackgrounduserid()})}">删除</a >
											<a th:href="@{/updateBackroundUser(backgroundUserId=${user.getBackgrounduserid()})}">修改</a >
											</div>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
						<div class="am-cf">
							共 <span th:text="${userlists.getTotal()}"></span> 条记录
							<div class="am-fr">
								<ul class="am-pagination">
									<li>
										<a th:href="@{/selectBackroundUser(pageNum=${userlists.getPrePage()},pageSize=10)}">«</a>
									</li>
									<li class="am-active" >
										<span th:text="${userlists.getPageNum()}"/>
									</li>
									<li>
										<a th:href="@{/selectBackroundUser(pageNum=${userlists.getNextPage()},pageSize=10)}">»</a>
									</li>
								</ul>
							</div>
						</div>
						<hr>
					</form>
				</div>
			</div>
		</div>
	</body>
</html>